<template>
    <div class="city">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <van-search v-model="keyWord" @input="onInput" placeholder="请输入地址" />
            <div class="list">
                <div
                    class="item"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="choose(item)"
                >
                    {{item.address}}
                </div>
            </div>
        </div>
        <!-- 当前位置 -->
        <div class="now"><strong>当前城市：{{nowPosition}}</strong></div>
        <!-- 百度地图 -->
        <div id="allmap"></div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

    export default {
        data() {
            return {
                keyWord: '',
                list: [],
                map: {},
            }
        },
        computed: {
            ...mapState({
                nowPosition: state => state.nowPosition,
                point: state => state.point
            })
        },
        methods: {
            ...mapMutations({
                setPosition: 'setPosition'
            }),
            // 返回
            onClickLeft() {
                this.$router.go(-1);
            },
            // 搜索
            onInput() {
                // 关键词搜索
                var _this = this;
                var options = {
                    onSearchComplete: function(results){
                        // 判断状态是否正确
                        if (local.getStatus() == BMAP_STATUS_SUCCESS){
                            _this.list = results.Hr;
                        }
                    }
                };
                var local = new BMap.LocalSearch(this.map, options);
                local.search(this.keyWord);
            },
            // 点击搜索结果
            choose(item) {
                this.setPosition(item);
                this.position()
            },
            // 定位
            position() {
                var map = this.map;
                var _this = this;
                map.centerAndZoom(new BMap.Point(_this.point.lng, _this.point.lat), 12);  // 初始化地图,设置中心点坐标和地图级别
                var mk = new BMap.Marker(_this.point);
                map.addOverlay(mk);
                map.panTo(_this.point);
            }
        },
        mounted() {
            var _this = this;
            // 百度地图API功能
            var map = new BMap.Map("allmap");    // 创建Map实例
            _this.map = map;
            // 定位
            this.position()
        }
    }
</script>

<style lang="scss" scoped>
    .city{
        width: 100%;
        height: calc(100vh - 1.226667rem);
        position: relative;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .search{
            margin-top: 1.226667rem;
            .list{
                height: 320px;
                overflow: auto;
                .item{
                    padding: 10px 0 10px 20px;
                }
            }
        }
        .now{
            font-size: 18px;
            width: 100%;
            position: absolute;
            bottom: 210px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #allmap{
            width: 100%;
            height: 200px;
            position: absolute;
            bottom: 0;
        }
    }
</style>
